<template>
  <div class="app-container">
    <div style="width: 100%; height: 80px ;display: flex; justify-content: center; align-items: center;">
      <el-button @click="drawer = true" style="position: absolute; top: 20px; right: 20px;" type="primary">查询历史</el-button>
      <el-drawer title="查询历史" :visible.sync="drawer" :direction="direction" ><span>我来啦!</span></el-drawer>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" style="margin-top: 10px" label-width="68px">
          <el-form-item prop="residentTypeId">
            <el-input
              style="width: 400px"
              v-model="queryParams.queryObj.holographicParam"
              placeholder="请输入姓名、证件号、手机号、车牌号、小区名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" icon="el-icon-search" style="margin-left: -11px"  @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
    </div>
    <hr>
    <div style="width: 100%; height: 720px">
      <!--查询结果-->
      <el-row :gutter="8">
        <!--小区-->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in plotList" :key="index">
          <el-card class="box-card" :body-style="{padding: '15px'}">
            <div style="width: 220px;height: 200px">
              <div style="width: 150px;height: 150px">
                <span style="margin-top: -5px;margin-left: 2px"><image-preview :src="item.plotPic" :width="140" :height="140"/></span>
              </div>
              <div style="width: 220px;height: 150px;margin-left: 150px;margin-top: -150px">
                <h4 style="margin-top: -1px">
                  {{ item.plotName }}
                </h4>
                <p>{{ item.address }}</p>
                <p>辖区:{{ item.areasName }}</p>
                <p>楼栋数：<span style="color: chocolate">{{ item.buildingNum != null ? item.buildingNum : 0 }}</span>栋 | 户数：<span style="color: chocolate">{{ item.actualBuilding!= null ? item.actualBuilding : 0 }}</span>户</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <!--车辆-->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in vehicleList" :key="index">
          <el-card class="box-card" :body-style="{padding: '15px'}">
            <div style="width: 220px;height: 200px">
              <div style="width: 150px;height: 150px">
                <span style="margin-top: -5px;margin-left: 2px"><image-preview :src="item.vehiclePhotoUrl" :width="140" :height="140"/></span>
              </div>
              <div style="width: 220px;height: 150px;margin-left: 150px;margin-top: -150px">
                <h4 style="margin-top: -1px">
                  {{ item.licensePlate }}
                </h4>
                <p>车主:{{ item.name }}</p>
                <p>辖区:{{ item.areasName }}</p>
                <p>小区:{{ item.plotName }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <!--房屋-->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in estateList" :key="index">
          <el-card class="box-card" :body-style="{padding: '15px'}">
            <div style="width: 220px;height: 200px">
                <p>小区名称:{{ item.plotName }}</p>
                <p>楼栋":{{ item.buildingsId }}</p>
                <p>单元:{{ item.unitsId }}</p>
                <p>楼层:{{ item.floorsId }}</p>
                <p>房间号:{{ item.roomNumber }}</p>
                <p>房屋类型:{{ item.roomTypeName }}</p>
            </div>
          </el-card>
        </el-col>
        <!--人口-->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in residentsList" :key="index">
          <el-card class="box-card" :body-style="{padding: '15px'}">
            <div style="width: 220px;height: 200px">
              <div style="width: 150px;height: 150px">
                <span style="margin-top: -5px;margin-left: 2px">
                  <image-preview :src="item.faceImage" :width="140" :height="140"/>
                </span>
              </div>
              <div style="width: 220px;height: 150px;margin-left: 150px;margin-top: -150px">
                <p>姓名:{{ item.name }}</p>
                <p>证件号码:{{ item.idNumber }}</p>
                <p>类型:{{ item.residentTypeId }}</p>
                <p>性别:{{ item.gender }}</p>
                <!--                <p>出生日期:{{ item.birthDate }}</p>-->
                <!--                <p>年龄:{{ item.birthDate }}</p>-->
                <p>户籍地址:{{ item.householdAddress }}</p>
                <p>联系电话:{{ item.phoneNumber }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <span v-if="placement">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageVo.currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageVo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </span>
    </div>
  </div>
</template>


<script>

// import {holographicRetrieval} from "@/api/archives/archives";

export default {
  data() {
    return {
      queryParams: {
        indexName: 'smart_data',
        pageVo: {
          pageSize: 10,
          currentPage: 1
        },
        queryObj: {}
      },
      drawer: false,
      // 展示位置
      placement: false,
      direction: 'rtl',
      holographicList: [],
      // 实有人口列表
      residentsList: [],
      // 实有房屋列表
      estateList: [],
      // 实有车辆列表
      vehicleList: [],
      // 小区列表
      plotList: [],
      total: 0,
    };
  },
  created() {

  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      holographicRetrieval(this.queryParams).then(res => {
        this.holographicList = res.list
        console.log(this.holographicList)
        this.total = res.total
        this.placement = true
        this.holographicList.forEach(item => {
          if (item.dataType === 1) {
            this.estateList.push(item)
          } else if (item.dataType === 2) {
            this.residentsList.push(item)
          } else if (item.dataType === 3) {
            this.vehicleList.push(item)
          } else if (item.dataType === 4) {
            this.plotList.push(item)
          }
        })
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageVo.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.queryParams.pageVo.currentPage = val
      this.handleQuery()
    }
  }
};
</script>
<style>

</style>
